<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="/A0723/include :: header('领取任务记录')"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">领取任务记录</h1>
</header>
<div class="mui-content">
    <ul class="task_jl">

    </ul>
</div>
<th:block th:include="/A0723/include :: footer"/>
<script th:src="@{/front/js/dist/clipboard.min.js}"></script>
<th:block th:include="/A0723/include :: common"/>
<script type="text/javascript">
    let screenshot = ''
    $(function () {
        receiveTasks([[${state}]])
    })
    let code = ''
    var clipboard = new ClipboardJS('.btn', {

    });

    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        mui.toast('已复制', {duration: 'long', type: 'div'})
    });
    //获取任务详情
    function receiveTasks(state) {
        mui.ajax(ctx + 'front/receiveTasks/' + state, {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                let data = res.data;
                var str = '';
                $.each(data, function (i, d) {
                    str += '<li class="flex3" ">\n' +
                        '            <div class="task_jl_messg">\n' +
                        '                <div>任务名称：' + d.taskWebVo.taskName + '</div>\n' +
                        '                <div>发布平台：' + d.platformType.name + '</div>\n' +
                        '                <div>任务类型：' + formatterWay(d.taskWebVo.type) + '</div>\n' +
                        '                <div>数量：1</div>\n' +
                        '                <div>' + (d.state === 1 ? '完成截图：<div class="file">\n' +
                            '                <input id="screenshot-' + d.id + '" type="hidden">\n' +
                            '                <input type="file" onchange="readFile(this,' + "'#screenshot-" + d.id + "'" + "," + "'#preview-screenshot-" + d.id + "'" + ')"/>' +
                            ' <img class="preview-img" id="preview-screenshot-' + d.id + '" src="'+ctx+'front/images/up.png" alt="">' +
                            '</div>' : '') + '</div>\n' +

                        '                <div>状态：' + (d.state === 1 ? '正在进行中' : d.state === 2 ? '已完成' : d.state === 3 ? '审核通过' : d.state === 4 ? '审核失败' : '') + '</div>\n' +
                        '                <div>视频地址：' + d.taskWebVo.videoUrl +'</div>'+
                        '                <div><button type="button" data-clipboard-text="'+d.taskWebVo.videoUrl+'" data-clipboard-action="copy"  class="btn" >复制</button></div>'+
                        '                <div>' + (d.state === 1 ? '创建时间：' + d.createTime : d.state === 2 ? '完成时间：' + d.finishTime : d.state === 3 ? '审核通过时间：' + d.checkTime : d.state === 4 ? '审核通过时间：' + d.checkTime : '') + '</div>\n' +
                        '                <div>' + (d.state === 1 ? '<button type="button" onclick="completeTask(' + d.id + ',' + d.taskId + ')" class="mui-btn mui-btn-blue">完成任务</button>' : '') + '</div>\n' +
                        '</div>\n' +

                        '            </div>\n' +
                        '            <div class="task_jl_menoy">\n' +
                        '                <span>' + d.taskWebVo.amount + '</span>元\n' +
                        '            </div>\n' +
                        '        </li>';
                })
                $(".task_jl").append(str);
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });
    }

    function completeTask(id, taskId) {
        mui.ajax(ctx + 'front/completeTask', {
            data: {'id': id, 'taskId': taskId, 'screenshot': $('#screenshot-' + id).val()},
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                mui.toast(res.msg, {duration: 'long', type: 'div'})
                setInterval(function () {
                    if (res.code == 0) {
                        window.location.href = ctx + 'front/toTasks'
                    }

                }, 1000)
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });
    }
</script>
</body>

</html>
